<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";
import qs from "qs";

const beforeAddEmployee = () => {
  dialogTitle.value = '新增员工';
  saveEmployeeForm.value = {
    name: '',
    password: 'password123',
    personId: '',
    gender: '',
    age:'',
    phone: '',
    email: '',
    address:'',
    department: '',
    roleId: ''
  };
  dialogVisible.value = true;
}

const nameTitle = ref('employeeManage')
const routerTitle = () => {
  router.push('/'+nameTitle.value)
}
const tableData = ref([])
const editEmployee = (id) => {
  dialogTitle.value = '编辑员工';
  dialogVisible.value = true;
  axios.get(BASE_URL+'/v1/employee/select?id='+id).then((response) => {
    if(response.data.code == 2001){
      console.log(response.data.data[0]);
      saveEmployeeForm.value = response.data.data[0];
      saveEmployeeForm.value.password = 'password123';
    }else {
      ElMessage.error(response.data.message)
    }
  })
}
const deleteEmployee = (id) => {
  ElMessageBox.confirm('您确定要删除该员工吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.post(BASE_URL+'/v1/employee/delete?id='+id).then((response) => {
      if(response.data.code == 2001){
        ElMessage.success('删除成功');
        loadEmployee();
      }else {
        ElMessage.error(response.data.message)
      }
    })
  }).catch(() => {

  })
}
const loadEmployee = () => {
  let data = qs.stringify(searchFormEmployee.value);
  axios.get(BASE_URL+'/v1/employee/select?'+data).then((response) => {
    if(response.data.code == 2001){
      tableData.value = response.data.data;
    }else {
      ElMessage.error(response.data.message)
    }
  })
}
onMounted(() => {
  loadEmployee();
  loadRoleInfo();
})
const genderFormatter = (row, column, cellValue, index) => {
  return cellValue == "1" ? '男' : '女';
}
const searchFormEmployee = ref({
  name: '',
  department: '',
  roleId: '',
})
const resetEmployee = () => {
  searchFormEmployee.value = {};
  loadEmployee()
}
const dialogVisible = ref(false);
const dialogTitle = ref('新增员工');
const handleClose = () => {
  ElMessageBox.confirm('您确定要关闭吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    dialogVisible.value = false;
    saveEmployeeForm.value = {
      name: '',
      password: 'password123',
      personId: '',
      gender: '',
      age:'',
      phone: '',
      email: '',
      address:'',
      department: '',
      roleId: ''
    };
  }).catch(() => {

  })
}
const saveEmployee = () => {
  let data = qs.stringify(saveEmployeeForm.value);
  axios.post(BASE_URL+'/v1/employee/insert',data).then((response) => {
    if(response.data.code == 2001){
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      saveEmployeeForm.value = {
        name: '',
        password: 'password123',
        personId: '',
        gender: '',
        age:'',
        phone: '',
        email: '',
        address:'',
        department: '',
        roleId: ''
      };
      loadEmployee();
    }else {
      ElMessage.error(response.data.message)
    }
  })
}
const saveEmployeeForm = ref({
  name: '',
  password: 'password123',
  personId: '',
  gender: '',
  age:'',
  phone: '',
  email: '',
  address:'',
  department: '',
  roleId: '',
})
const roleInfo = ref([])
const loadRoleInfo = () => {
  axios.get(BASE_URL+'/v1/role/select').then((response) => {
    if(response.data.code == 2001){
      roleInfo.value = response.data.data;
      console.log(roleInfo.value);
    }else {
      ElMessage.error(response.data.message)
    }
  })
}
</script>

<template>
  <el-card v-loading="loading" style="margin-top: 20px;color: #333333;"  shadow="never">
    <el-radio-group @change="routerTitle" v-model="nameTitle" style="margin-bottom: 10px;
                    color: #6b778c;font-size: 32px; font-weight: 600;">
      <el-radio-button value="employeeManage">员工列表</el-radio-button>
      <el-radio-button value="roleManage">角色列表</el-radio-button>
    </el-radio-group>
    <el-button type="primary" style="float:right;margin-top:10px;"
               @click="beforeAddEmployee">新建员工</el-button>
    <el-divider style="margin-bottom: 0"></el-divider>
    <!-- 搜索栏 -->
    <el-form :inline="true" style="margin-top: 20px;">
      <el-form-item label="所属科室" style="width: 220px;">
        <el-select placeholder="请选择科室"
                   v-model="searchFormEmployee.department" @change="loadEmployee">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="产科" value="产科"></el-option>
          <el-option label="儿科" value="儿科"></el-option>
          <el-option label="耳鼻喉科" value="耳鼻喉科"></el-option>
          <el-option label="妇产科" value="妇产科"></el-option>
          <el-option label="妇科" value="妇科"></el-option>
          <el-option label="骨科" value="骨科"></el-option>
          <el-option label="呼吸内科" value="呼吸内科"></el-option>
          <el-option label="急诊科" value="急诊科"></el-option>
          <el-option label="口腔科" value="口腔科"></el-option>
          <el-option label="泌尿外科" value="泌尿外科"></el-option>
          <el-option label="内分泌科" value="内分泌科"></el-option>
          <el-option label="皮肤科" value="皮肤科"></el-option>
          <el-option label="普外科" value="普外科"></el-option>
          <el-option label="神经内科" value="神经内科"></el-option>
          <el-option label="神经外科" value="神经外科"></el-option>
          <el-option label="肾内科" value="肾内科"></el-option>
          <el-option label="消化内科" value="消化内科"></el-option>
          <el-option label="心内科" value="心内科"></el-option>
          <el-option label="心血管外科" value="心血管外科"></el-option>
          <el-option label="胸外科" value="胸外科"></el-option>
          <el-option label="眼科" value="眼科"></el-option>
          <el-option label="检查室一" value="检查室一"></el-option>
          <el-option label="检查室二" value="检查室二"></el-option>
          <el-option label="检查室三" value="检查室三"></el-option>
          <el-option label="检查室四" value="检查室四"></el-option>
          <el-option label="检查室五" value="检查室五"></el-option>
          <el-option label="检查室六" value="检查室六"></el-option>
          <el-option label="检查室七" value="检查室七"></el-option>
          <el-option label="检查室八" value="检查室八"></el-option>
          <el-option label="检查室九" value="检查室九"></el-option>
          <el-option label="检查室十" value="检查室十"></el-option>
          <el-option label="药剂科" value="药剂科"></el-option>
          <el-option label="行政科" value="行政科"></el-option>
          <el-option label="麻醉科" value="麻醉科"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位" style="width: 220px;">
        <el-select placeholder="请选择岗位"
                   v-model="searchFormEmployee.roleId" @change="loadEmployee">
          <el-option v-for="item in roleInfo" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工姓名" style="width: 290px;">
        <el-input placeholder="请输入员工姓名"
                  v-model="searchFormEmployee.name" @keydown.enter="loadEmployee"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetEmployee">重置</el-button>
        <el-button type="primary" @click="loadEmployee">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-divider style="margin-bottom: 0;margin-top: 10px"></el-divider>
    <!-- 员工弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               style="width:1000px;padding:40px;" :before-close="handleClose">
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="员工姓名">
              <el-input placeholder="请输入员工姓名" v-model="saveEmployeeForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工密码">
              <el-input readonly :value="saveEmployeeForm.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input placeholder="请输入身份证号" v-model="saveEmployeeForm.personId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住地址">
              <el-input placeholder="请输入地址" v-model="saveEmployeeForm.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select placeholder="请选择" v-model="saveEmployeeForm.gender">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属科室">
              <el-select placeholder="请选择" v-model="saveEmployeeForm.department">
                <el-option label="管理员" value="管理员"></el-option>
                <el-option label="产科" value="产科"></el-option>
                <el-option label="儿科" value="儿科"></el-option>
                <el-option label="耳鼻喉科" value="耳鼻喉科"></el-option>
                <el-option label="妇产科" value="妇产科"></el-option>
                <el-option label="妇科" value="妇科"></el-option>
                <el-option label="骨科" value="骨科"></el-option>
                <el-option label="呼吸内科" value="呼吸内科"></el-option>
                <el-option label="急诊科" value="急诊科"></el-option>
                <el-option label="口腔科" value="口腔科"></el-option>
                <el-option label="泌尿外科" value="泌尿外科"></el-option>
                <el-option label="内分泌科" value="内分泌科"></el-option>
                <el-option label="皮肤科" value="皮肤科"></el-option>
                <el-option label="普外科" value="普外科"></el-option>
                <el-option label="神经内科" value="神经内科"></el-option>
                <el-option label="神经外科" value="神经外科"></el-option>
                <el-option label="肾内科" value="肾内科"></el-option>
                <el-option label="消化内科" value="消化内科"></el-option>
                <el-option label="心内科" value="心内科"></el-option>
                <el-option label="心血管外科" value="心血管外科"></el-option>
                <el-option label="胸外科" value="胸外科"></el-option>
                <el-option label="眼科" value="眼科"></el-option>
                <el-option label="检查室一" value="检查室一"></el-option>
                <el-option label="检查室二" value="检查室二"></el-option>
                <el-option label="检查室三" value="检查室三"></el-option>
                <el-option label="检查室四" value="检查室四"></el-option>
                <el-option label="检查室五" value="检查室五"></el-option>
                <el-option label="检查室六" value="检查室六"></el-option>
                <el-option label="检查室七" value="检查室七"></el-option>
                <el-option label="检查室八" value="检查室八"></el-option>
                <el-option label="检查室九" value="检查室九"></el-option>
                <el-option label="检查室十" value="检查室十"></el-option>
                <el-option label="药剂科" value="药剂科"></el-option>
                <el-option label="行政科" value="行政科"></el-option>
                <el-option label="麻醉科" value="麻醉科"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="所属岗位">
              <el-radio-group v-model="saveEmployeeForm.roleId">
                <el-radio v-for="item in roleInfo" :label="item.name" :value="item.id"/>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input placeholder="请输入邮箱" v-model="saveEmployeeForm.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input placeholder="请输入年龄" v-model="saveEmployeeForm.age"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input placeholder="请输入手机号" v-model="saveEmployeeForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveEmployee">确定</el-button>
      </template>
    </el-dialog>
    <!-- 员工表格 -->
    <el-table :data="tableData" style="width: 100%;font-size: 14px;" stripe >
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="员工姓名" width="120" align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80" align="center" :formatter="genderFormatter"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号码" width="120" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200" align="center"></el-table-column>
      <el-table-column prop="address" label="地址" width="180" align="center"></el-table-column>
      <el-table-column prop="department" label="所属科室" width="120" align="center"></el-table-column>
      <el-table-column prop="roleName" label="角色" width="120" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="120" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editEmployee(scope.row.id)">编辑</el-button>
          <el-button link type="primary" @click="deleteEmployee(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
  </el-card>
</template>

<style scoped>

</style>